<template>
  <div>
    <div class="swiper-container" id="swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>
    <!--<div class="swiper-container" id="swiper2">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>-->
  </div>
</template>

<script>
import Swiper from './utils/swiper.js';
import './css/swiper.css';

export default {
  name: 'slidesPerView',
  data() {
    return {};
  },
  mounted() {
    new Swiper('#swiper1', {
      slidesPerView: 1.2,
      centeredSlides: true,
      spaceBetween: 20
    });
  }
};
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  width: 6rem;
  display: flex;
  align-items: center;
}
.swiper-slide {
  width: 6rem;
  height: 3rem;
  background-color: #586c94;
  &:nth-of-type(1) {
    width: 7.5rem;
    height: 6rem;
  }
}
</style>
